HTML/CSS Vocabulary Flashcards
For this project, I was required to create a total of 35 flashcards defining common coding terms for HTML/CSS. Establishing a design system early on was imperative to ensure visual coherence across the board. I had to meticulously prototype the flashcards, transforming them into a seamless and functional digital deck. Additionally, I designed an inviting opening page and an HTML/CSS menu to ensure the overall accessibility of the flashcards.
This project allowed me to deepen my understanding of prototyping using Adobe XD, which was my main goal. During the last project, I encountered challenges with prototyping logistics and occasional confusion. For this project, I hoped to design a visually engaging deck of flashcards that would transform a potentially 'boring' learning experience into something
enjoyable and captivating.
enjoyable and captivating.
After sketching and doing a lot of ideation, I had a slight idea of the visual theme I wanted to create. The main goal was to craft a design that accommodated varying text lengths, given the diversity of content across the 35 cards. Also important for me was the endeavor of a vibrant and aesthetically pleasing design that did not compromise readability. I was inspired by a combination
of Memphis Style and Y2K Tech.
of Memphis Style and Y2K Tech.
At the point of Lo-Fi wireframes, the main goal was to have a clear idea of where I wanted my material to be placed. Research findings influenced some, while others were inspired by styles that I believed could complement the project prompt effectively. During the selection process for my sketches, a straightforward yet funky style emerged as the clear winner in my view. My Lo-Fi wireframe, initially bare bones and presented as a scrolling card, later evolved into the
the distinctive flip format I decided on.
the distinctive flip format I decided on.
This second iteration of my wireframe was nearly 100% of the way there. Again, I am still designing at this point as if I would have a scroll flashcard instead of a flip one. At this point in my creative process, I knew that I wasn’t satisfied with my cards, but I wasn’t sure what else to do without busying them up too much. Notably, all of the elements included in the Med-Fi wireframe remained consistent just with some color variation.
After feeling dissatisfied with the scrolling Med-Fi wireframe, I decided one way to engage the viewer would be to make the cards respond to tapping by flipping, instead of being a scrolling flashcard. This decision prompted the addition of a sleek frame around the card's border, ensuring a seamless visual connection between the front and back. I also helped keep the design system integrity by using the same components on the back as on the front, just resizing and reorganizing them.
For the navigation of my flashcard deck, I wanted to have a clear and easy route for the viewer. I wanted the consumer to be able to go forwards and backwards through the flashcards. I additionally wanted every card to have the ability to go to the home screen. Finally, I wanted to have HTML terms and CSS terms separated into their own categories, with an easy way to switch between the two.
When I was originally creating my scrolling flashcards, I input all of my character styles and components for every single piece of visual information on my boards. However, components are not compatible with the transitions needed to show a flipping animation. A loophole of sorts was the fact that I could easily command D the board and delete any layers I did not need. I ended up just command D-ing my way through the entire project!
By far the most time consuming portion of this project was the prototyping of it all. My overall design system was relatively simple, especially after building out my first and then just copy and pasting information in. There is no simple way to explain everything I did to get my cards to flip, but let’s just say it involved inputting a lot of numbers and wanting to pull some hair out! Each card that you see actually includes 2 artboards, one for the front and one for the back. So although there are 35 cards, I actually ended up completing 70 artboards!
^^Click To Try^^
From this project, I learned a lot more about the functionality of Adobe XD. During my last experience working with the software, I couldn’t fully wrap my mind around how the things I did caused the prototype to function. I am extremely proud of myself for taking the risk and doing a flipping flash card because I learned so much from it. I wasn’t doing things at one point because a tutorial said to, but because I actually understood what I was doing enough to troubleshoot and problem-solve.
